<style scoped lang="less">

</style>
<template>
  <div  v-if="configData!=null">
      <Form ref="customerServiceForm" :rules="csRuleValidate" :model="configData" :label-width="140">
        <FormItem label="手机号" prop="customer_service_phone">
          <Input v-model="configData.customer_service_phone" style="width:260px"
                 placeholder="请输入手机号"></Input>
        </FormItem>
        <FormItem label="微信号" prop="customer_service_wx_no">
          <Input v-model="configData.customer_service_wx_no" style="width:260px"
                 placeholder="请输入微信号"></Input>
        </FormItem>
        <FormItem label="微信二维码" prop="customer_service_qrcode">
          <SelectImg v-model="configData.customer_service_qrcode"
                     :limit="1"
                     :initList="configData.customer_service_qrcode"></SelectImg>
        </FormItem>
      </Form>
      <Button type="primary" @click="postCustomerService" :loading="loading">保存</Button>
  </div>

</template>
<script>
  import {editCustomerService, getCustomerService} from '@/api/tenant-config';
  import {checkPhoneNum} from '@/libs/util';
  import SelectImg from '../../components/select-img';

  export default {
    name: 'customer-service',
    components: {
      SelectImg
    },
    data() {
      return {
        configData: null,
        loading: false,
        csRuleValidate: {
          customer_service_phone: [
            {required: true, message: '手机号不能为空', trigger: 'blur'},
            {
              validator: (rule, value, callback) => {
                if (!checkPhoneNum(value)) {
                  callback('请输入正确的手机号');
                } else {
                  callback();
                }
              }
            }
          ],
          customer_service_wx_no: [
            {required: true, message: '微信号不能为空', trigger: 'blur'}
          ],
          customer_service_qrcode: [
            {required: true, type: 'array', message: '请选择图片', trigger: 'blur'},
            {
              validator: (rule, value, callback) => {
                if (!value) {
                  callback('请选择图片');
                } else if (value.length === 0 || value[0] === '') {
                  callback('请选择图片');
                } else {
                  callback();
                }
              }
            }
          ]
        }
      };
    },
    created() {
      this.getData();
    },
    methods: {
      getData() {
        let vm = this;
        getCustomerService().then(rep => {
          if (rep.data.data.customer_service_qrcode != null) {
            rep.data.data.customer_service_qrcode = JSON.parse(rep.data.data.customer_service_qrcode);
          }
          vm.configData = rep.data.data;
        })
      },
      postCustomerService() {
        this.loading = true;
        let vm = this;
        this.$refs['customerServiceForm'].validate((valid) => {
          if (valid) {
            editCustomerService({
              phone: vm.configData.customer_service_phone,
              qrcode: JSON.stringify(vm.configData.customer_service_qrcode),
              wx_no: vm.configData.customer_service_wx_no
            }).then(rep => {
              this.loading = false;
              vm.$Message.success('修改成功');
            }, error => {
              this.loading = false;
            })
          }
        })
      }
    }
  }
</script>